<template>
    <div class="txt-editor" v-if="$model">

        <div style="display:block;">

            <div style="display: block;">行以
                <el-input v-model="$model.txtStart" :class="[  $model.txtStart ? 'txt': 'empty' ]"
                          @blur="compute_count"></el-input>
                开始，
            </div>
            <div style="display: block;"> 依次包含
                <el-input v-model="$model.txt1" :class="[  $model.txt1 ? 'txt': 'empty' ]"
                          @blur="compute_count"></el-input>
                、
                <el-input v-model="$model.txt2" :class="[  $model.txt2 ? 'txt': 'empty' ]"
                          @blur="compute_count"></el-input>
                、
                <el-input v-model="$model.txt3" :class="[  $model.txt3 ? 'txt': 'empty' ]"
                          @blur="compute_count"></el-input>
                ,
            </div>
            <div style="display: block;">
                以
                <el-input v-model="$model.txtEnd" :class="[  $model.txtEnd ? 'txt': 'empty' ]"
                          @blur="compute_count"></el-input>
                结束。
            </div>

        </div>

        <div style="padding:4px;" :key="$data.version">
            匹配第
            <el-tag v-if="$model.matchLines && $model.matchLines.length">
                『{{ $model.matchLines.map(it => it + 1).join(",") }}』
            </el-tag>
            行
            <template v-if="$model.matchLines && $model.matchLines.length === 1">
                <div style="display: inline-block;">
                    <div style="display: inline-block;">
                        ，<label v-if="$model.location && !$model.location.startsWith('Replace') ">在</label> 匹配行
                        <el-select size="small" v-model="$model.location" style="width:120px;display: inline-block">
                            <el-option
                                v-for="item in $data.data_location"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code">
                            </el-option>
                        </el-select>
                    </div>


                    <el-input v-model="$model.replace" v-if="$model.location == 'ReplaceWord' " class="txt"></el-input>
                    <label v-if="$model.location && $model.location.startsWith('Replace') ">为</label>

                </div>

                <el-input v-model="$model.content"></el-input>
            </template>
        </div>
    </div>
</template>
<script setup>



defineOptions({
    name: "txt-editor",
    inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({
    "version": 0,

    "data_location": [{"code": "Before", "name": "之前插入"}, {
        "code": "After",
        "name": "之后插入"
    }, {"code": "ReplaceLine", "name": "整行替换"}, {"code": "ReplaceWord", "name": "替换字符串"}]
});


const $props = defineProps({
    content: {type: String}
});


//{"content":"","replace":"","location":"","matchLines":[]}
const $model = defineModel({type: Object});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "change"]);


const compute_count = function () {
    $data.version++;
    var lines = $props.content.split("\n");
    var model = Object.assign({}, $model.value);
    model.matchLines = jv.dev.getEditorIndexes(lines, model);
    console.log(model.matchLines);

    $emit("update:modelValue", model);
    $emit("change", model);
};


</script>


<style scoped lang="scss">
.txt-editor {
    width: 100%;
    display: block;
    text-align: left;
}


::v-deep(.empty) {
    width: 40px !important;
    margin: 4px 1px;
}


::v-deep(.empty) input {
    background-color: #e5e5e5;
}

::v-deep(.txt) {
    width: 130px !important;
    margin: 4px 1px;
}

::v-deep(.txt) input {
    color: darkblue;
    font-weight: bold;
}
</style>